import React, { Component } from 'react';
import './stationItem.scss'
import position from '../../static/position.png'
import { withRouter } from 'react-router-dom'
import { getUrlParam } from '../../utils/tools'
import Confirm from '../../comm/confirm'
import {fmtDistance} from "../../utils/maths"
class StationItem extends Component {
    constructor(props) {
        super(props);
        this.state = {
            state: false
        }
    }
    render() {
        return (
            <div>
                <div  className="station" onClick={this.go_info.bind(this)}>
                    <div className="station-top">
                        <p className="station-title">{this.props.item.name}</p>
                        <button onClick={this.go_pay.bind(this)}>立即加油</button>
                    </div>
                    <div className="station-bottom">
                        <div className="station-money-info">
                            <p className="price">{this.props.item.plateformPrice}
                                <span>元/L</span>
                            </p>
                            {this.props.item.cutPrice > 0?<p className="subsidy">补贴{this.props.item.cutPrice}元/L</p> : ""}
                            { this.props.item.productInfoStoreDTOList[0].activityKind==1? <p className="subsidy">最低</p> : ""}

                        </div>
                        <div className="station-distance-info">
                            <p>{fmtDistance(this.props.item.distance)}| </p>
                            <p onClick={this.openLocation.bind(this, this.props.item.lat, this.props.item.lot)}><img src={position}></img>路线</p>
                        </div>
                    </div>
                </div>
                <Confirm setConfirm={this.setConfirm.bind(this)} state={this.state.state} content={'该站点暂不支持点我加油，请联系加油员扫码支付'} />
            </div>
        );
    }
    openLocation(latitude, longitude, e) {
        e.stopPropagation();
        window.wx.miniProgram.navigateTo({
            url: "/pages/map/map?lat=" + Number(latitude) + '&lot=' + Number(longitude)
        })
    }
    go_pay(e) {
        e.stopPropagation();
        if (this.props.item.distance > 1) {
            this.setState({
                showIOS2: true,
            })
        }       
        if (this.props.item.checkSwitch=='0') {
            this.setState({
                state:true
            })
            return false
        }
        window.wx.miniProgram.navigateTo({
            url: '/pages/nextY/nextY?storeid=' + this.props.item.id + '&showOil=true'
        })
    }
    go_info() {
        let params = JSON.parse(getUrlParam('distanceInfo'))
        this.props.history.push('/stationInfo?lat=' + params.lat + '&lot=' + params.lot + '&stationId=' + this.props.item.id + "&id=" + getUrlParam('id'))
    }
    setConfirm(){
        this.setState({
            state:false
        })
    }
}

export default withRouter(StationItem);